<template>
  <div class="app-container">
    <div class="titleLineGreen">基本信息</div>
    <!-- 基本信息 -->
    <div class="flexbox flex">
      <div>
        <div class="info flex">
          <el-image
            v-if="info.avatar.includes('http')"
            class="info_avatar"
            :src="info.avatar"
            :preview-src-list="[info.avatar]"
          ></el-image>
          <div v-if="!info.avatar.includes('http')" class="avatar_name">
            {{ getLastTwoCharacters(info.studentName) }}
          </div>
          <div class="info_right">
            <!-- 教师信息 -->
            <div class="info_teacherinfos">
              <div class="flex info_teacherinfo_line1">
                <div class="info_teacherinfo_line_item flex">
                  <el-tooltip
                    class="item"
                    effect="dark"
                    :content="info.studentName"
                    placement="top-start"
                  >
                    <div class="info_teacherinfo_line_item_nickname overTxt">
                      {{
                        info.studentName
                      }}<span
                    >( {{ info.studentNum ? info.studentNum : '--' }})</span
                    >
                    </div>
                  </el-tooltip>

                  <img
                    v-if="info.sex == 1"
                    class="sex"
                    src="@/assets/images/sex_women.png"
                    alt="加载失败"
                  />
                  <img
                    v-else
                    class="sex"
                    src="@/assets/images/sex_man.png"
                    alt="加载失败"
                  />
                </div>
              </div>
              <div style="margin-top: 15px">
                <el-tooltip
                  class="item"
                  effect="dark"
                  :content="info.branchName"
                  placement="top-start"
                >
                  <div class="info_teacherinfo_line_item overTxt">
                    {{ info.branchName ? info.branchName : '--' }}-{{
                      info.majorName ? info.majorName : '--'
                    }}-{{ info.className ? info.className : '--' }}
                  </div>
                </el-tooltip>
              </div>
              <div class="info_teacherinfo_line_item" style="margin-top: 15px">
                <tooltip
                  :text="`授课班级：${
                    info.schedulingNames ? info.schedulingNames : '--'
                  }`"
                  width="100%"
                ></tooltip>
              </div>
              <div class="flex info_teacherinfo_line2">
                <div class="info_teacherinfo_line_item overTxt">
                  身份证: {{ info.idCard ? info.idCard : '--' }}
                </div>
                <div class="info_teacherinfo_line_item overTxt">
                  手机号:
                  {{ (info.phoneNumber ? info.phoneNumber : '--') | regPhone }}
                </div>
                <!--                <div class="info_teacherinfo_line_item overtxt">微信号: &#45;&#45;</div>-->
              </div>
            </div>
          </div>
        </div>
        <div class="cards flex">
          <!-- 数据卡片 -->
          <div class="info_dataCards flex">
            <div class="info_dataCard" style="margin: 0 0 0 0">
              <!-- 数据卡片的顶行 -->
              <div class="info_dataCard_topLine flex">
                <div
                  class="info_dataCard_topLine_point"
                  style="background: rgba(44, 172, 255, 1)"
                ></div>
                <div class="info_dataCard_topLine_lable">学习数据</div>
              </div>

              <!-- 数据卡片数据行 -->
              <div class="info_dataCard_dateLine info_dataCard_dateLine2 flex">
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 5.2vw; margin-right: 1.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">
                    累计在线时长
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
                      info.studyTime || info.studyTime == 0
                        ? (info.studyTime / 360).toFixed(2) + 'h'
                        : '--'
                    }}
                    <!-- <span v-if="info.hisAvgScore">/{{ info.hisAvgScore }}</span> -->
                  </div>
                </div>
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 2.6vw; margin-right: 1.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">活跃值</div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.active ? info.active.toFixed(2) : '--' }}
                  </div>
                </div>
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 4.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">
                    已学课程数
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.finishCourseNum ? info.finishCourseNum : '--' }}
                  </div>
                </div>
              </div>
            </div>
          </div>
          <!-- 数据卡片 -->
          <div class="info_dataCards flex">
            <div class="info_dataCard" style="margin: 0 0 0 20px">
              <!-- 数据卡片的顶行 -->
              <div class="info_dataCard_topLine flex">
                <div
                  class="info_dataCard_topLine_point"
                  style="background: rgba(44, 172, 255, 1)"
                ></div>
                <div class="info_dataCard_topLine_lable">考核数据</div>
              </div>

              <!-- 数据卡片数据行 -->
              <div class="info_dataCard_dateLine info_dataCard_dateLine2 flex">
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 3.7vw; margin-right: 1.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">平均成绩</div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.avgScore }}
                    <span v-if="info.hisAvgScore">/{{ info.hisAvgScore }}</span>
                  </div>
                </div>
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 2.9vw; margin-right: 1.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">及格率</div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.excellentRate }}
                  </div>
                </div>
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 6vw; margin-right: 1.5vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">
                    首次考核通过率
                  </div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{ info.firstExamPassingRate }}
                  </div>
                </div>
                <div
                  class="info_dataCard_dateLine_item"
                  style="width: 3.7vw; text-align: center"
                >
                  <div class="info_dataCard_dateLine_item_lable">考核次数</div>
                  <div class="info_dataCard_dateLine_item_value">
                    {{
                      info.examNum || info.examNum == 0 ? info.examNum : '--'
                    }}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 雷达图 -->
      <div class="bottom_content_right">
        <div class="turn_total">
          <i
            @click="turnLeft"
            class="el-icon-d-arrow-left"
            :class="{ prohibited: nowIndex == 0 }"
          ></i>
          <div class="text">{{ nowStuEvaluateName }}</div>
          <i
            @click="turnRight"
            class="el-icon-d-arrow-right"
            :class="{
              prohibited: stuEvaluateList.length - 1 == nowIndex,
            }"
          ></i>
        </div>
        <div
          class="creditDetails"
          style="z-index: 9999999"
          ref="creditDetailsRef"
        ></div>
      </div>
    </div>

    <!-- 学习记录 -->
    <div class="titleLineGreen" style="margin-top: 10px">学习记录</div>
    <el-form
      style="margin-top: 20px"
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <el-form-item label="学期" prop="semesterId">
        <el-select
          style="width: 150px"
          filterable
          v-model="queryParams.semesterId"
          placeholder="请选择"
          clearable
        >
          <el-option label="全部" :value="''"></el-option>
          <el-option
            v-for="item in schoolSemesterList"
            :key="item.semesterId"
            :label="item.semesterName"
            :value="item.semesterId"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="课程" prop="courseName">
        <el-input
          v-model="queryParams.courseName"
          placeholder="请输入课程名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!-- <el-form-item label="课程类型" prop="type">
        <el-select
          style="width: 150px"
          filterable
          v-model="queryParams.type"
          placeholder="请选择课程类型"
          clearable
        >
          <el-option
            v-for="dict in dict.type.sys_course_type"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item label="学习状态" prop="studyStatus">
        <el-select
          style="width: 150px"
          filterable
          v-model="queryParams.studyStatus"
          placeholder="请选择学习状态"
          clearable
        >
          <el-option label="未开始" :value="0"/>
          <el-option label="学习中" :value="1"/>
          <el-option label="已学习" :value="2"/>
          <el-option label="中止" :value="3"/>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          v-preventReClick
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
        >搜索
        </el-button>
        <el-button
          v-preventReClick
          icon="el-icon-refresh"
          size="mini"
          @click="resetQuery"
        >重置
        </el-button>
      </el-form-item>
    </el-form>
    <div class="flex" style="border-top: 1px solid #ebebeb">
      <div
        style="
          width: calc(100% - 430px);
          max-height: 545px;
          height: auto !important;
        "
      >
        <el-table
          height="100%"
          @row-click="handleRowClick"
          :row-class-name="getRowClass"
          v-loading="loading"
          :data="postList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            fixed="left"
            width="200"
            show-overflow-tooltip
            :label="`${$courseName ? $courseName : '课程'}名称`"
            align="center"
            prop="courseName"
          />
          <!--          <el-table-column label="类型" align="center" prop="type">-->
          <!--            <template slot-scope="scope">-->
          <!--              <dict-tag-->
          <!--                :options="dict.type.sys_course_type"-->
          <!--                :value="scope.row.type"-->
          <!--              />-->
          <!--            </template>-->
          <!--          </el-table-column>-->
          <el-table-column
            sortable
            width="120"
            label="学习时间(h)"
            align="center"
            prop="studyTime"
          >
            <template slot-scope="scope">
              <div>
                {{
                  scope.row.studyTime
                    ? (scope.row.studyTime / 60 / 60).toFixed(2)
                    : '--'
                }}
              </div>
            </template>
          </el-table-column>
          <el-table-column label="学习状态" align="center" prop="studyStatus">
            <template slot-scope="scope">
              <el-tag :type="typeList[scope.row.studyStatusStr]">
                {{
                  scope.row.studyStatusStr == '进行中'
                    ? '学习中'
                    : scope.row.studyStatusStr
                }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            v-if="gradeType == 1"
            width="120"
            sortable
          >
            <template #header> 百分制</template>
            <template slot-scope="scope">
              <div>{{ scope.row.score }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            sortable
            v-if="gradeType == 2"
            width="120"
          >
            <template #header> 优良等级</template>
            <template slot-scope="scope">
              <div>{{ excellentLevel[scope.row.excellentLevel] }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            sortable
            v-if="gradeType == 3"
            width="100"
          >
            <template #header> 学分制</template>
            <template slot-scope="scope">
              <div>{{ scope.row.credit }}</div>
            </template>
          </el-table-column>
          <el-table-column
            sortable
            label="分数"
            align="center"
            prop="score"
            width="120"
          >
            <template #header>
              分数
              <el-tooltip class="item" effect="dark" placement="bottom">
                <i
                  class="el-icon-question shou"
                  style="
                    font-size: 16px;
                    vertical-align: middle;
                    margin-left: 5px;
                  "
                ></i>
                <div slot="content">
                  <div>"0"：该课程的考核成绩</div>
                  <div>" "：该课程没有考核</div>
                  <div>"-"：学生尚未完成该课程</div>
                </div>
              </el-tooltip>
            </template>
          </el-table-column>

          <el-table-column
            width="130"
            label="首次通过率"
            align="center"
            prop="firstExamPassingRate"
          >
            <template slot-scope="scope">
              {{ scope.row.firstExamPassingRate * 100 }}%
            </template>
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template slot-scope="scope">
              <el-button
                v-preventReClick
                size="mini"
                type="text"
                icon="el-icon-view"
                @click="handleDetail(scope.row, scope.$index)"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div class="studyResult" style="width: 420px; padding-top: 10px">
        <div class="studyResult_title flexBet">
          <div class="label">学习成果</div>
          <div class="flex">
            <img
              class="icon shou"
              src="@/assets/images/studyResults/refresh.png"
              alt="加载失败"
              @click="resultReset"
            />
            <img
              style="margin-left: 10px"
              class="icon shou"
              src="@/assets/images/studyResults/quanping.png"
              alt="加载失败"
              @click="fullScreen"
            />
          </div>
        </div>
        <!-- 学习成果 -->
        <studyResultByTime
          num="3"
          formatter="byHour"
          size="mini"
          ref="studyResultByTimeDia"
          height="500px"
        >
        </studyResultByTime>
        <!-- 学习成果弹窗 -->
        <el-dialog
          top="1vh"
          title="学习成果"
          width="960px"
          :visible.sync="studyResultByTime_open"
        >
          <studyResultByTime
            num="5"
            formatter="byHour"
            ref="studyResultByTimeDia_fullScreen"
          ></studyResultByTime>
          <div slot="footer" class="dialog-footer flexEnd">
            <el-button type="primary" @click="studyResultByTime_open = false"
            >关 闭
            </el-button>
          </div>
        </el-dialog>
      </div>
    </div>

    <gradeDetail
      :courseType="courseType"
      :studentId="$route.query.studentId"
      :open.sync="gradeDetail_open"
      :propCourseStuId="gradeDetail_courseStuId"
      :propList="gradeDetail_propList"
    ></gradeDetail>
  </div>
</template>

<script>
import { getLastTwoCharacters } from '@/utils/util'
import StudyResultByTime from "@/components/studyResultByTime";
import * as echarts from 'echarts'
import { getStudentEvaluateList, getRadarData } from '@/api/mine/mine'
import gradeDetail from '@/components/gradeDetail.vue'
import { getPost, delPost, addPost, updatePost } from '@/api/system/post'
import { studentStudyData, studentCourses } from '@/api/schoolOrganization/student'
import { getSchoolSemesterList } from '@/api/schoolSemester/schoolSemester'

export default {
  name: 'Post',
  components: {
    gradeDetail,
    StudyResultByTime
  },
  dicts: ['sys_course_type'],
  data() {
    return {
      getLastTwoCharacters: (name) => {
        return getLastTwoCharacters(name)
      },
      // 详情组件
      courseType: '',
      gradeDetail_open: false,
      gradeDetail_courseStuId: '',
      gradeDetail_propList: [],

      studyResultByTime_open: false,
      model: {
        courseId: ''
      },

      excellentLevel: {
        1: '优',
        2: '良',
        3: '中',
        4: '差'
      },
      gradeType: null,
      avgScore: undefined,
      // 学生详情组件参数
      studentGradeDetailOpen: false,
      studentGradeDetailId: '',
      studentGradeDetailIndex: '',
      studentGradeDetailList: [],
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 岗位表格数据
      postList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 9999,
        courseName: undefined,
        workstationName: undefined,
        type: undefined,
        semesterId: undefined,
        studyStatus: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        postName: [
          { required: true, message: '岗位名称不能为空', trigger: 'blur' }
        ],
        postCode: [
          { required: true, message: '岗位编码不能为空', trigger: 'blur' }
        ],
        postSort: [
          { required: true, message: '岗位顺序不能为空', trigger: 'blur' }
        ]
      },
      //   学生信息
      info: {
        avatar: ''
      },
      // 学期列表
      schoolSemesterList: [],
      // 用来记录当前选中行的索引
      highlightedRowIndex: null,

      classFinishTaskCountData: [],
      studentFinishTaskCountData: [],
      stuEvaluateList: [],
      nowStuEvaluateName: '',
      nowStuEvaluateId: '',
      dateList: [],
      classAllCredit: 0,
      stuAllCredit: 0,
      nowIndex: 0,
      studyData: {},
      courseData: [],
      indicator: [],
      dataValue: [],
      dataValue2: [],
      typeList: {
        '未开始': 'info',
        '进行中': '',
        '已学习': 'success',
        '中止': 'danger'
      }
    }
  },
  async created() {
    await this.getInfo()
    this.getList()

    this.getStudentEvaluateList()
    this.getSchoolSemester()
  },
  methods: {
    // 获取学期列表
    async getSchoolSemester() {
      let res = await getSchoolSemesterList()
      const { code, rows } = res
      if (code == 200) {
        this.schoolSemesterList = rows
      }
    },
    // 全屏学习成果
    fullScreen() {
      this.studyResultByTime_open = true
      this.$nextTick(() => {
        this.$refs.studyResultByTimeDia_fullScreen.getALLresult(
          {
            type: 'mine',
            className: this.info.className,
            studentId: this.$route.query.studentId,
            studentName: this.info.studentName,
            studentNum: this.info.studentNum
          },
          {
            courseId: this.model.courseId,
            semesterId: this.queryParams.semesterId,
            type: this.queryParams.type,
            studyStatus: this.queryParams.studyStatus,
            courseName: this.queryParams.courseName
          },
          this.info
        )
      })
    },
    async getStudentEvaluateList() {
      let params = {
        schoolId: this.$store.getters.schoolId
      }
      console.log(params)
      let res = await getStudentEvaluateList(params)
      const { code, data } = res
      if (code == 200) {
        this.stuEvaluateList = data.filter((item) => {
          return item.paramList.length > 0
        })
        console.log('this.stuEvaluateList', this.stuEvaluateList)
        this.nowStuEvaluateName = data[0].name
        this.nowStuEvaluateId = data[0].id
        this.nowIndex = 0
        this.getRadarData(this.nowStuEvaluateId)
      }
    },
    turnLeft() {
      if (this.nowIndex == 0) {
        return
      }
      this.nowIndex--
      this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].name
      this.nowStuEvaluateId = this.stuEvaluateList[this.nowIndex].id
      this.getRadarData(this.nowStuEvaluateId)
    },
    turnRight() {
      if (this.nowIndex == this.stuEvaluateList.length - 1) {
        return
      }
      this.nowIndex++
      this.nowStuEvaluateName = this.stuEvaluateList[this.nowIndex].name
      this.nowStuEvaluateId = this.stuEvaluateList[this.nowIndex].id
      this.getRadarData(this.nowStuEvaluateId)
    },
    async getRadarData(id) {
      let res = await getRadarData(id, {
        studentId: this.$route.query.studentId
      })
      const { code, data } = res
      if (code == 200) {
        if (data && data.length > 0) {
          let arr = []
          let dataValue = []
          let dataValue2 = []
          data.forEach((value) => {
            let obj = {
              text: value.name,
              max: 110
            }
            dataValue.push(value.studentScore)
            dataValue2.push(value.classScore)
            arr.push(obj)
          })
          this.indicator = arr
          this.dataValue = dataValue
          this.dataValue2 = dataValue2
        }
      }
      this.setCreditOption()
    },
    setCreditOption() {
      let myChart = echarts.init(this.$refs.creditDetailsRef)
      let option
      option = {
        color: ['#2754F3', '#28B28B'],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['班级平均', '我的'],
          top: 0,
          orient: 'vertical', // 设置为垂直方向
          right: -10, // 图例距离右侧边缘的距离
          left: 'right'
        },
        radar: [
          {
            indicator: this.indicator,
            center: ['50%', '50%'],
            radius: 100
          }
        ],
        series: [
          {
            type: 'radar',
            symbolSize: 0,
            tooltip: {
              trigger: 'item'
            },
            data: [
              {
                value: this.dataValue2,
                name: '班级平均',
                lineStyle: {
                  width: 1
                }
                // areaStyle: {
                //   color: "rgba(39, 84, 243, 0.2)",
                // },
              },
              {
                value: this.dataValue,
                name: '我的',
                lineStyle: {
                  width: 1
                }
                // areaStyle: {
                //   color: "rgba(39, 84, 243, 0.2)",
                // },
              }
            ],
            label: {
              show: true,
              position: 'inside',
              formatter: function(params) {
                return params.value
              },
              color: '#2754F3'
            }
          }
        ]
      }
      option && myChart.setOption(option)
    },
    /* 获取成绩详情 */
    async handleDetail(row) {
      this.gradeDetail_courseStuId = row.courseStuId
      this.courseType = row.courseType
      this.gradeDetail_propList = this.postList
      this.gradeDetail_open = true
    },
    /* 查询学生详细信息 */
    async getInfo() {
      let res = await studentStudyData(this.$route.query.studentId)
      console.log('查询学生详细信息', res.data)
      this.info = res.data
      this.info.firstExamPassingRate =
        this.info.firstExamPassingRate || this.info.firstExamPassingRate == 0
          ? (this.info.firstExamPassingRate * 100).toFixed(2) + '%'
          : '--'
      this.info.excellentRate =
        this.info.excellentRate || this.info.excellentRate == 0
          ? (this.info.excellentRate * 100).toFixed(2) + '%'
          : '--'
      this.studyData = res.data
    },

    /** 查询岗位列表 */
    getList() {
      this.loading = true
      studentCourses({
        studentId: this.$route.query.studentId,
        ...this.queryParams
      }).then((response) => {
        let avglist = [...response.data]
        // 计算列表成绩列的平均成绩,如果成绩为零的数据行不进入计算
        avglist = avglist.filter((item) => {
          return item.avgScore || item.avgScore == 0
        })
        if (avglist.length > 0) {
          this.avgScore =
            avglist.reduce((pre, cur) => {
              return pre + cur.avgScore
            }, 0) / avglist.length
        }

        this.postList = response.data
        if (response.data.length > 0) {
          this.gradeType = response.data[0].gradeType
        }
        // this.total = response.total;
        this.loading = false
        this.$nextTick(() => {
          // 先重置课程
          this.model = {
            courseId: ''
          }
          // 在获取课程成果
          console.log('在获取课程成果', this.info)
          this.$refs.studyResultByTimeDia.getALLresult(
            {
              type: 'mine',
              className: this.info.className,
              studentId: this.$route.query.studentId,
              studentName: this.info.studentName,
              studentNum: this.info.studentNum
            },
            {
              courseId: this.model.courseId,
              semesterId: this.queryParams.semesterId,
              type: this.queryParams.type,
              studyStatus: this.queryParams.studyStatus,
              courseName: this.queryParams.courseName
            },
            this.info
          )
        })
      })
    },
    resultReset() {
      this.highlightedRowIndex = ''
      this.model.courseId = ''
      // 在获取课程成果
      this.$refs.studyResultByTimeDia.getALLresult(
        {
          type: 'mine',
          className: this.info.className,
          studentId: this.$route.query.studentId,
          studentName: this.info.studentName,
          studentNum: this.info.studentNum
        },
        {
          courseId: this.model.courseId,
          semesterId: this.queryParams.semesterId,
          type: this.queryParams.type,
          studyStatus: this.queryParams.studyStatus,
          courseName: this.queryParams.courseName
        },
        this.info
      )
    },
    // 表格某一行被点击 根据点击课程调取学习成果
    handleRowClick(e) {
      this.highlightedRowIndex = e.courseId
      this.model = {
        courseId: e.courseId
      }
      // 在获取课程成果
      this.$refs.studyResultByTimeDia.getALLresult(
        {
          type: 'mine',
          className: this.info.className,
          studentId: this.$route.query.studentId,
          studentName: this.info.studentName,
          studentNum: this.info.studentNum
        },
        {
          courseId: this.model.courseId,
          semesterId: this.queryParams.semesterId,
          type: this.queryParams.type,
          studyStatus: this.queryParams.studyStatus,
          courseName: this.queryParams.courseName
        }
      )
    },
    getRowClass({ row }) {
      return row.courseId === this.highlightedRowIndex ? 'success-row' : ''
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        pageNum: 1,
        pageSize: 9999,
        courseName: undefined,
        workstationName: undefined,
        type: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.postId)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const postId = row.postId || this.ids
      getPost(postId).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改岗位'
      })
    },
    /** 提交按钮 */
    submitForm: function() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.postId != undefined) {
            updatePost(this.form).then(() => {
              this.$modal.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addPost(this.form).then(() => {
              this.$modal.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const postIds = row.postId || this.ids
      this.$modal
        .confirm('是否确认删除岗位编号为"' + postIds + '"的数据项？')
        .then(function() {
          return delPost(postIds)
        })
        .then(() => {
          this.getList()
          this.$modal.msgSuccess('删除成功')
        })
        .catch(() => {
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        'system/post/export',
        {
          ...this.queryParams
        },
        `post_${new Date().getTime()}.xlsx`
      )
    }
  }
}
</script>
<style lang="scss" scoped>
.app-container {
  width: 100%;
  height: calc(100vh - 100px);
  overflow: auto;
}

.flexbox {
  justify-content: space-between;
  box-sizing: border-box;
  padding-right: 50px;
  width: 100%;
}

::v-deep .el-table .success-row {
  background: rgb(231, 246, 243) !important;
}

.studyResult {
  margin-left: 10px;
  padding-left: 10px;
  border-left: 1px dashed #ebebeb;

  .studyResult_title {
    .label {
      font-size: 16px;
      font-weight: 600;
    }

    .icon {
      width: 15px;
      height: 15px;
    }
  }
}

.prohibited {
  cursor: not-allowed !important;
  opacity: 0.4;
}

.bottom_content {
  display: flex;
  align-items: center;

  &_right {
    // 缩小80%
    margin-top: -10px;
    transform: scale(0.8);
    width: 330px;
    height: 280px;
    box-sizing: border-box;

    .turn_total {
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;

      .el-icon-d-arrow-left,
      .el-icon-d-arrow-right {
        color: #28b28b;
        font-size: 16px;
        cursor: pointer;
        user-select: none;
      }

      .text {
        font-size: 16px;
        margin: 0 20px;
      }
    }

    .creditDetails {
      width: 100%;
      height: 280px;
    }
  }
}

.info_dataCards {
  margin-top: 22px;

  .info_dataCard {
    height: 112px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 0 12px rgba(99, 99, 99, 0.14);
    box-sizing: border-box;
    padding: 16px 20px 0 20px;

    .info_dataCard_topLine.flex {
      .info_dataCard_topLine_point {
        margin: 5px 8px 0 0;
        width: 10px;
        height: 10px;
        border-radius: 5px;
      }

      .info_dataCard_topLine_lable {
        font-size: 14px;
        font-weight: 600;
        line-height: 20px;
        color: rgba(51, 51, 51, 1);

        span {
          margin: 4px 0 0 0;
          font-size: 10px;
          font-weight: 400;
          line-height: 14px;
          color: rgba(51, 51, 51, 1);
        }
      }
    }

    .info_dataCard_dateLine2 {
    }

    .info_dataCard_dateLine1 {
    }

    .info_dataCard_dateLine.flex {
      margin-top: 20px;

      .info_dataCard_dateLine_item {
        .info_dataCard_dateLine_item_lable {
          font-size: 12px;
          font-weight: 400;
          line-height: 17px;
          color: rgba(153, 153, 153, 1);
        }

        .info_dataCard_dateLine_item_value {
          margin-top: 4px;
          font-size: 18px;
          font-weight: 600;
          line-height: 25px;
          color: rgba(238, 62, 62, 1);

          span {
            margin: 4px 0 0 0;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
            color: rgba(51, 51, 51, 1);
          }
        }
      }
    }
  }
}

.info.flex {
  margin: 23px 0 0 0;

  .info_avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1px solid rgba(229, 229, 229, 1);
    margin: 0 24px 0 10px;
  }

  .avatar_name {
    margin: 0 24px 0 10px;
    border: 1px solid #eeeeee;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: PingFangSC, PingFang SC, sans-serif;
    font-weight: 600;
    color: #ffffff;
    background: #ff7c32;
  }

  .info_right {
    .info_teacherinfos {
      .info_teacherinfo_line_item {
        box-sizing: border-box;
        padding-right: 25px;
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
        color: rgba(96, 98, 102, 1);

        .info_teacherinfo_line_item_nickname {
          font-size: 18px;
          font-weight: 600;
          line-height: 20px;
          color: rgba(51, 51, 51, 1);
          max-width: 227px;

          span {
            font-size: 14px;
            font-weight: 400;
            line-height: 20px;
            color: #606266;
          }
        }

        .sex {
          margin: 5px 0 0 5px;
          width: 12px;
          height: 12px;
        }
      }

      .info_teacherinfo_line1 {
        margin-top: 3px;
      }

      .info_teacherinfo_line2 {
        margin-top: 15px;
      }
    }

    .info_dataCards {
      margin-top: 22px;

      .info_dataCard {
        height: 112px;
        border-radius: 8px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0 0 12px rgba(99, 99, 99, 0.14);
        box-sizing: border-box;
        padding: 16px 0 0 20px;

        .info_dataCard_topLine.flex {
          .info_dataCard_topLine_point {
            margin: 5px 8px 0 0;
            width: 10px;
            height: 10px;
            border-radius: 5px;
          }

          .info_dataCard_topLine_lable {
            font-size: 14px;
            font-weight: 600;
            line-height: 20px;
            color: rgba(51, 51, 51, 1);

            span {
              margin: 4px 0 0 0;
              font-size: 10px;
              font-weight: 400;
              line-height: 14px;
              color: rgba(51, 51, 51, 1);
            }
          }
        }

        .info_dataCard_dateLine2 {
          .info_dataCard_dateLine_item:last-of-type {
            width: 60px !important;
          }
        }

        .info_dataCard_dateLine1 {
          .info_dataCard_dateLine_item:last-of-type {
            width: 92px !important;
          }
        }

        .info_dataCard_dateLine.flex {
          margin-top: 20px;

          .info_dataCard_dateLine_item {
            width: 100px;

            .info_dataCard_dateLine_item_lable {
              font-size: 12px;
              font-weight: 400;
              line-height: 17px;
              color: rgba(153, 153, 153, 1);
            }

            .info_dataCard_dateLine_item_value {
              margin-top: 4px;
              font-size: 18px;
              font-weight: 600;
              line-height: 25px;
              color: rgba(238, 62, 62, 1);

              span {
                margin: 4px 0 0 0;
                font-size: 12px;
                font-weight: 400;
                line-height: 16px;
                color: rgba(51, 51, 51, 1);
              }
            }
          }
        }
      }
    }
  }
}
</style>
